// import {setBadge} from '../utils/websocket.js';
import {mSendMsg,mReadMessage} from '../utils/chat.js';
import {deepClone,formatTime} from '../utils/util.js';

import {commentImgUrl} from '../../api/api'

//import { timingSafeEqual } from 'crypto';
Page({
  data: {
    InputBottom: 0,
    paddingSize:100,
    inputTxt:"",//输入框输入的内容
    histories:[],//保存历史记录
    itemMsg:{},//上一个页面传递过来的数据,渲染头像的时候使用的是这个这个里面的头像的地址
    merchantInfo:{},//本地获取的商家的信息
    toIndex:"",//瞄点，滚动到最后一条消息
    scrollTop:0,
    merchantId:"",//页面传值传递过来的商家id
    // 每次改变toindex 的值是不是就可以
    pageNum:0,
    showRefresh:false
  },
  onLoad(){
    //openSocket();
  },
//保存聊天记录
//获取在线客服
//渲染历史记录

sendPic(){
  let that = this;
  console.log("sendPic-------");
  wx.chooseImage({
    count:3,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success (res) { 
      // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths;
      console.log(`%c6666`,"color:orange");
      console.log(tempFilePaths);
      tempFilePaths.forEach(item =>{
              //一次选择的图片路径是一个数组，
              wx.uploadFile({
                url:commentImgUrl,
                filePath:item,
                name:'file',
                formData:{
                  'user':'test'
                },
                success (res){
                  console.log(res,"图片上传成功");
                  let result = JSON.parse(res.data);
                  if(result.code == 200){
                      // let returnImgs = that.data.returnImgs;
                      // returnImgs.push(result.data);
                      // //把返回的结果存储到一个数组中
                      // that.setData({
                      //     returnImgs
                      // })
                      console.log(result.data,"返回的图片的路径.....");
                      that.toSend("img",result.data);

                  }else{
                     //给页面添加一个破裂的图片的照片标志。 
                      wx.showToast({
                        title: '服务器错误,图片上传错误',
                        icon:"none"
                      })
                  }
                },
                fail(){
                     wx.showToast({
                       title: '服务器错误，图片发送失败',
                     })
                }
              })

              //
           
      })
    }
  })
},

  seeBigImg(e){
    let urls = [];
    urls.push(e.currentTarget.dataset.src)
    wx.previewImage({
      current:e.currentTarget.dataset.src, //当前显示图片的http链接
      urls, // 需要预览的图片http链接列表
    })
  },


  onShow(){
    // 获取到本地的商家信息保存在内存中 
    let merchantInfo = wx.getStorageSync('merchantLoginInfo');
    this.setData({
       merchantInfo:merchantInfo,
    })

    //获取页面传值
    let pages = getCurrentPages();
    let currentPage = pages[pages.length-1];
    let itemMsg = currentPage.options.itemMsg;
    itemMsg = JSON.parse(itemMsg);
    let time = currentPage.options.time;
    //如果是页面传值过来的time和内存中的time一样，那么说明是从
    //选择相册的也买跳转过来的，那么不需要刷新页面
    //如果是从其他入口跳转到当前的页面，那么会出生地一个时间戳，
    //时间戳和data 中的time 不一样，需要刷新。
    if(time == this.data.time)return;
    console.log(itemMsg,time,"----------------页面传值");
    this.setData({
        itemMsg,
        time
    })
    this.readMessageW(itemMsg.openId);
    this.init(itemMsg);
  },

  //清空未读消息
  readMessageW(openId){
    mReadMessage(openId).then(res=>{
         console.log(res,"清空未读消息");
    })
    //setBadge();
  },


  onUnload(){
    //刷新tabbar
    console.log("onhide 方法------------------------")
    //setBadge();
  },

  // 接收到消息之后会跨页面调用这个方法
  receivedMsg(msg){
       console.log(msg,"接收到的消息");
       if(msg.openId == this.data.itemMsg.openId){
            let histories = this.data.histories;
            histories.push(msg);
            this.setData({
                histories,
            })
            this.setToIndex();
            //进来的时候和每次接收到消息的时候标志已读。
            // 只有在退出的时候修改tabbar
            this.readMessageW(this.data.merchantId);
       }else{
          let content = JSON.parse(msg.content);
          console.log(content,"content");
          if(content.type == "text"){
              wx.showToast({
                title:`${msg.uName}：【消息】`,   
                image:"../../images1/timg.png",
                duration:3000
              })

          }else{
              //图片
              wx.showToast({
                title:`${msg.uName}：【图片】`,  
                image:"../../images1/timg.png",
                duration:3000
              })
          }

          
       }
  },
  
  //返回商家id
  //getMerchant(){
  //   return this.data.merchantId
  //}



  //每次进入之后要初始化数据，因为这个页面四公用的。
  init(itemMsg){
      console.error(itemMsg,"删除后的 数组")
      //---------- 清空数据
      // if(id!=this.data.merchantId){
      this.setData({
        services:[],
        selService:{},
        inputTxt:"",//输入框输入的内容
      });

      


      wx.setNavigationBarTitle({
        title:itemMsg.uname
      })

      //-----------渲染历史记录
      this.renderHistory(itemMsg);
  },


  renderHistory(history){
      //获取到传递过来的历史记录数据。
      // let history = this.data.itemMsg;
      console.log(history,"历史记录");
      //如果没有历史记录，那么不去做下面的操作
      if(history == null||history==""){
           return;
      }

      //拼接出来第一条数据
      let item1 = {
         chatTime:history.chatTime,
         content:history.content,
         initiator:history.initiator,
         mname:history.mname
      }
      //concat后面的所有数据
      let histories = [];
      histories.push(item1);
      // 判断contents 是不是存在，如果不存在那么不需要拼接
      // 为什么会不存在呢？
      // 因为如果只有一条消息的时候就不存在。后端是这样设置的
      if(history.contents){
          histories = histories.concat(history.contents);
          //处理数据的结构，然后直接渲染了。
      }
      //1 现在已经把历史记录的格式处理好了，可以直接渲染了。
      //2 把历史记录保存到本地，
      // 3调用分页函数，触底一个参数（currentPage）
      // 3 根据currentPage 取出历史记录 
      wx.setStorageSync('historyList',histories);
      this.renderHistoryForPage();
  },

  renderHistoryForPage(){
      let that =this;
      console.warn("加载更多历史记录.....")


      let page = that.data.pageNum;//从0开始
      let historyList = wx.getStorageSync('historyList');
      // slice(2,8); 不会截取索引为8 的数据，所以可以直接使用 length 不需要 -1
      let lastIdx = historyList.length;
      //lastidx = idx - page*10;
      //preidx = idx - (page+1)*10+1
      //50 - 0*10 = 50
      //50 - 1*10 = 41

      //50 - 2*10 = 31
      //后一个index


      
      let idx2 = lastIdx - page*10;
      let idx1 = lastIdx - (page+1)*10;
      // 计算出来的数据是 10- 20 ，20-30 ，30-40 
      // 使用slice 截取的时候不会截取最后一个索引的值20， 30 ，40
      // 所以实际每次截取的索引是 10-19 20-29 30-39

      // 判断两个索引,上一次
      if(idx2 <= 0){
          wx.showToast({
            title: '没有更多啦',
            icon:"none"
          })

          return;
      }
      console.log("%c通过","color:orange;")
      if(idx1 <0){
          idx1 = 0;

      }

      // 取出来的数组应该放在原来的数组的前面，
      // 也就是说原来的数组在现在的数组的后面
      // 也就是说使用 现在的数组 concat 原来的数组
      // slice 方法不会截取最后一个索引的数据
      // slice(2,8); 不会截取索引为8 的数据，所以可以直接使用 length 不需要 -1
      let history = historyList.slice(idx1,idx2);
      console.error(history,"截取的数组")
      console.error(idx1,idx2,"截取的索引")
      let histories = this.data.histories;
      let newHistory = history.concat(histories);
      


      this.setData({
         histories:newHistory,
         pageNum:this.data.pageNum+1,
      })

      // 如果是第一次调用那么渲染完成后要滚动到最底部
      // 如果是用户手动点击加载更多那么不需要
      if(page == 0){
        this.setToIndex()
      }


      

  },

  



  addTxt(msg){
    
    let  date=new Date();
    date= formatTime(date); 
      console.log(date,"%c 时间---------------------","color:orange;")
      // 给后面添加三个字符 
      // 给前面减去一个字符
      // date = date.substring(2);
      //这样就和后端传递过来的事件一样长了。

      let item = {
         chatTime:date,
         initiator:"m",
      }

      let content = {
        type:"text",
        msg:msg
      }

      item.content = JSON.stringify(content);
      let histories =  this.data.histories;
      histories.push(item);
      this.setData({
        histories,
      })

      //设置滚动到底部
      this.setToIndex()


      // ------------------------------------------------------------------


  },
  
  addImg(img){
    
    let date = new Date();
    date = formatTime(date);
    //这样就和后端传递过来的事件一样长了。

    let item = {
       chatTime:date,
       initiator:"m",
    }

    let content = {
      type:"img",
      msg:img
    }

    item.content = JSON.stringify(content);

    let histories =  this.data.histories;
    histories.push(item);
    this.setData({
      histories,
    })

    //设置滚动到底部
    this.setToIndex()
    // ------------------------------------------------------------------
},

  //点击按钮调用这个方法
  toSend1(){
      this.toSend("text");
  },


  toSend(flag,imgPath){
        let that = this;
        console.log("发送消息----");
        //获取大输入的信息
        console.log(this.data.inputTxt,"输入框的信息")
        //获取输入框中的信息
        let text = this.data.inputTxt;
          //清空输入框

          setTimeout(() => {
            this.setData({
              inputTxt:""
            })
          },200);



        let itemMsg = this.data.itemMsg;
      let data = {
        // recipientId:item.id,//客服id
        // mname:itemMsg.mname,//我的用户名
        // headImage:itemMsg.mheadImage,//我的头像
        // merchantId:this.data.merchantId,//商家id
        openId:itemMsg.openId
      }

      let message = "";
      if(flag == "text"){
          console.log(text,"输入框中的信息");
          //判断输入的内容是不是空
          if(text.trim() == ""){
              console.error("输入的内容是空");
              return;
          }
          message = {
            type:"text",
            msg:text
          }

          this.addTxt(text);
      }else{ 
         //发送图片 
          message = {
            type:"img",
            msg:imgPath
          }
          this.addImg(imgPath)
          
      }
      message = JSON.stringify(message);
      data.message = message;
      mSendMsg(data).then(res=>{
          console.log(res,"发送消息的回调函数");
          // 发送成功之后去渲染历史记录
      })
  },


/**
 * 1 键盘弹出的时候输入框会上移，上移的高度就是键盘距离底部的高度
 * 
 * 2 要保证消息外层的包裹框架距离底部的高度大于等于键盘的高度，
 *   
 * 1 判断 msgW 距离底部的距离
 * 2 if 大于键盘的高度，那么什么都不做
 * 3 如果小于键盘的高度，那么需要上移
 * 4 上移多少呢？
 * 键盘的高度 - msgw 底部距离屏幕底部的高度 
 *    
 * 
 * 
 * **/ 






  // ui 自带的方法
  InputFocus(e) {
    this.setData({
      // e.detail.height 可以获取键盘弹出的高度
      // InputBottom: e.detail.height,
      // paddingSize:true
    })

    // setTimeout(() => {
    //     this.setToIndex();
    // },200);



    //设置scroll 的padding-bottom 的高度是b + 100rpx(输入框的高度)

  },
  InputBlur(e) {
    // this.setData({
    //   InputBottom: 0,
    //   // paddingSize:false,
    // })
  },



  inputMsg(e){
        console.log(e.detail.value,"输入内容");
        this.setData({
            inputTxt:e.detail.value
        })
  },
  // 让scroll 滚动到底部
  // 1 每次push进去一个历史记录的时候
  // 2 每次弹出键盘的时候
  // 3 每次进入页面的时候


   setToIndex(){
      // 获取到histories 最后一个索引

      //  let index = this.data.histories.length-1;
      //  console.log("最后一个的索引",index);
      //  this.setData({
      //      toIndex:"id"+index
      //  })
      let that = this;

      wx.createSelectorQuery().select('.cu-chat').boundingClientRect(function(rect){
        // 使页面滚动到底部
        wx.pageScrollTo({
          scrollTop: rect.height
        })
        // console.log(rect,"-------rect")
        // that.setData({
        //     scrollTop:rect.height
        // })

        
      }).exec()

   },


})
